<template>
  <!-- 默认菜单（显示在大屏幕上） -->
  <ul class="default-menu">
    <li v-for="item in menuItems" :key="item.id">
      <a
          v-if="item.children.length === 0"
          :href="item.url"
          :class="{ active: currentRoute === item.url }"
          @click="navigate(item.url)"
      ><i :class="item.icon"></i>
        {{ item.name }}
      </a>
      <div v-else class="default-menu-child">
        <a
            :href="item.url"
            :class="{ active: isParentActive(item.url, item.children.map(child => child.url)) }"
            @click="navigate(item.url)"
        >
          <i :class="item.icon"></i>{{ item.name }}
        </a>
        <ul class="default-menu-sub">
          <li v-for="child in item.children" :key="child.id">
            <a
                :href="child.url"
                :class="{ active: currentRoute === child.url }"
                @click="navigate(child.url)"
            >
              <i :class="child.icon"></i>{{ child.name }}
            </a>
          </li>
        </ul>
      </div>
    </li>
  </ul>

  <!-- 移动端汉堡按钮 -->
  <div class="mobile-menu-btn" @click="toggleMobileMenu">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
  </div>

  <!-- 遮罩层 -->
  <div v-if="isMobileMenuOpen" class="overlay" @click="closeMobileMenu"></div>

  <!-- 侧边栏 -->
  <nav :class="{ 'active': isMobileMenuOpen }">
    <ul id="starlist">
      <li v-for="item in menuItems" :key="item.id" class="menu" :class="{ 'active': isExpanded(item.id) }">
        <a @click.prevent="toggleMenu(item.id)" @click="navigate(item.url)" :href="item.url">
          <i :class="item.icon"></i>{{ item.name }}
          <span v-if="item.children.length > 0" class="arrow"></span>
        </a>
        <ul v-if="item.children.length > 0" class="sub" v-show="isExpanded(item.id)">
          <li v-for="child in item.children" :key="child.id">
            <a @click.prevent="navigate(child.url)" :href="child.url">
              <i :class="child.icon"></i>{{ child.name }}
            </a>
          </li>
        </ul>
      </li>
      <li class="search-bar">
        <SearchBar/>
        <ThemeSwitch/>
      </li>
    </ul>


  </nav>

</template>

<script setup>
import SearchBar from "@/components/nav/SearchBar.vue";
import ThemeSwitch from "@/components/nav/ThemeSwitch.vue";

const router = useRouter();
// 当前选中的菜单路由
const currentRoute = ref(window.location.pathname); // 用于记录当前路径
const isMobileMenuOpen = ref(false);
const menuItems = ref([]);
const expandedMenu = ref(null); // 用于存储当前展开的菜单 ID

// 切换菜单展开状态
const toggleMenu = (id) => {
  if (expandedMenu.value === id) {
    expandedMenu.value = null; // 如果已经展开，则关闭当前菜单
  } else {
    expandedMenu.value = id; // 展开新的菜单
  }
};

// 判断菜单是否处于展开状态
const isExpanded = (id) => {
  return expandedMenu.value === id;
};

// 控制菜单及遮罩逻辑
const toggleMobileMenu = () => {
  isMobileMenuOpen.value = !isMobileMenuOpen.value;
  document.body.classList.toggle("no-scroll", isMobileMenuOpen.value);
};

const closeMobileMenu = () => {
  isMobileMenuOpen.value = false;
  document.body.classList.remove("no-scroll");
};

// 切换页面并更新选中状态
const navigate = (path) => {
  currentRoute.value = path;
  router.push(path);
};

// 判断父菜单是否应该被选中
const isParentActive = (parentPath, childPaths) => {
  return currentRoute.value === parentPath || childPaths.includes(currentRoute.value);
};

onMounted(async () => {
  document.body.classList.remove("no-scroll");
  try {
    const response = await axios.get('/api/blog/menu/tree/');
    menuItems.value = response.data;
  } catch (error) {
    console.error('获取导航数据失败', error);
  }
});

onBeforeUnmount(() => {
  document.body.classList.remove("no-scroll");
});
</script>


<style scoped>
/* 顶部默认菜单样式 */

.default-menu {
  display: flex;
  justify-content: center;
  background-color: var(--nav-bg-color, #393d49);
  padding: 10px 0;
  list-style: none;
  margin: 0;
}

.default-menu li {
  margin: 0 15px;
}

.default-menu li a {
  color: white;
  text-decoration: none;
  font-size: 16px;
}

.default-menu li a i {
  margin-right: 2px;
}

.default-menu li a:hover {
  color: #5fb878;
}


/* 默认菜单选中菜单项样式 */
.default-menu li a.active {
  color: #00c1de;
}

.default-menu-child {
  position: relative;
}

.default-menu-child .default-menu-sub {
  position: absolute;
  top: 25px;
  left: -15%;
  background-color: var(--nav-bg-color, #393d49);
  display: none;
  border-radius: 3px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  padding: 5px 0 0 0;
  list-style: none;
  margin: 0;
  z-index: 999; /* 确保内容层级 */
}
.default-menu-child .default-menu-sub li {
  margin: 0 auto;
  padding: 0;
}

.default-menu-child .default-menu-sub li a {
  color: white;
  text-decoration: none;
  font-size: 14px;
  display: block; /* 确保链接填充整个菜单项 */
  padding: 8px 0; /* 调整链接的内边距 */
  white-space: nowrap; /* 防止文字换行 */
}

.default-menu-child .default-menu-sub li a:hover {
  color: #5fb878;
}

.default-menu-child:hover .default-menu-sub {
  display: block;
}

.default-menu-child:hover .default-menu-sub li {
  margin: 0 15px;
}

/* 遮罩层 */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5); /* 半透明背景色 */
  z-index: 998; /* 层级在侧边栏后面 */
}

/* 禁止滚动的样式 */
body.no-scroll {
  overflow: hidden;
}

/* 侧边栏 */
nav {
  position: fixed;
  top: 65px;
  left: -100%;
  width: 150px;
  height: calc(100vh - 65px);
  background: #393d49;
  overflow-y: auto;
  transition: all 0.3s ease;
  z-index: 999; /* 层级在遮罩层后面 */
}

nav.active {
  left: 0;
}

#starlist {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#starlist li {
  position: relative;
  border-bottom: 1px solid #2a3338;
}


#starlist li a {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  font-size: 14px;
  color: #fff;
  text-decoration: none;
}

#starlist li a i {
  margin-right: 5px;
}

#starlist li a:hover {
  background: #5fb878;
  color: #fff;
}

#starlist li.active a {
  color: #fff;
}

/* 子菜单样式 */
#starlist .sub {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: none;
  background: #2a2f3a;
}

#starlist .menu.active .sub {
  display: block;
}

#starlist .sub li a {
  padding: 8px 30px;
  font-size: 14px;
  color: #ddd;
}


#starlist .sub li a:hover {
  color: #fff;
}

/* 箭头指示样式 */
.arrow {
  margin-left: auto;
  border: 4px solid transparent;
  border-top-color: #fff;
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}

.menu.active .arrow {
  transform: rotate(180deg); /* 展开时箭头朝上 */
}

/* 移动端汉堡按钮 */
.mobile-menu-btn {
  display: none; /* 默认隐藏 */
  position: fixed;
  z-index: 1000;
  cursor: pointer;
}

.mobile-menu-btn .bar {
  width: 25px;
  height: 2px;
  background: #fff;
  margin: 5px 0;
  transition: 0.3s;
}

/* 汉堡按钮动画 */
.mobile-menu-btn.active .bar:nth-child(1) {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.mobile-menu-btn.active .bar:nth-child(2) {
  opacity: 0;
}

.mobile-menu-btn.active .bar:nth-child(3) {
  transform: rotate(45deg) translate(-5px, -6px);
}

@media (max-width: 992px) {
  .mobile-menu-btn {
    display: block; /* 当屏幕宽度小于992px时显示 */
  }

  .default-menu {
    display: none;
  }

  .search-bar {
    display: none;
  }
}

@media (max-width: 768px) {
  .mobile-menu-btn {
    display: block; /* 当屏幕宽度小于768px时显示 */
  }

  .default-menu {
    display: none;
  }

  .search-bar {
    display: none;
  }
}

@media (max-width: 576px) {
  .search-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

}


</style>
